<template>
  <div class="login">
    <h1 class="title">尊敬的管理你好，请登录</h1>
    <InputBox title="账号" v-model="user.username"></InputBox>
    <InputBox title="密码" v-model="user.password"></InputBox>
    <button class="login-btn" v-debounce="{ fn: Login }">登录</button>
    <br />
    <p >
      <span @click="jumpRegister()">还未有账号？点此注册/忘记密码</span>
    </p>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from "vue";
import { useRouter } from "vue-router";
import InputBox from "../components/InputBox.vue";
import { userRequest } from "../api/UserRequest";

const router = useRouter();
//用户信息
const user = reactive({
  username: "", //账号
  password: "", //密码
});
// 登录接口
function Login() {
  userRequest
    .Login(user)
    .then((response) => {
      if (!response) {
        return;
      }
      // 登录成功后将社团id记录
      if (response?.association) {
        sessionStorage.setItem("assId", response.association.id);
        router.push({
          name: "Choose",
          params: {
            data: JSON.stringify(response),
          },
        });
      } else {
        router.push({
          name: "Manager",
        });
      }
    })
    .catch((err) => err);
}

// 跳转到注册页面
function jumpRegister() {
  router.push({
    name: "Register",
  });
}
</script>

<style lang="scss">
$colors: (
  "t-blue": #21618d,
  //常用颜色--蓝
  "t-grey": #8a8888,
  //字体常用颜色--灰
  "t-white": #f5f5f5,
  //字体常用颜色--白
  "border": #707070 //边框颜色,,,,,,,,,,,,,,,,,,,,,,,
);
.login {
  width: 100%;
  height: 100%;
  h1 {
    margin-bottom: 50px;
    font-size: 45px;
    color: map-get($map: $colors, $key: t-grey);
    text-align: center;
  }
  .input-box {
    margin: 0 0 52px 30px;
    display: flex;
    align-items: center;
  }
  .login-btn {
    width: 150px;
    height: 50px;
    text-align: center;
    cursor: pointer;
    background-color: #ffffff;
    color: map-get($map: $colors, $key: t-grey);
    font-size: 30px;
    margin-left: 600px;
    border-radius: 50px;
    border: 1px solid map-get($map: $colors, $key: border);
    &:hover {
      color: map-get($map: $colors, $key: t-blue);
    }
  }
  p {
    margin: 20px 0 50px;
    font-size: 35px;
    color: map-get($map: $colors, $key: t-grey);
    display: flex;
    justify-content: center;
    span{
      cursor: pointer;
    }
  }
}
</style>